<script setup lang="ts">
//  toRef   如果原始对象是非响应式的就不会更新视图 数据是会变的,如果原始对象是响应式的是会更新视图并且改变数据的
import { reactive, toRef, toRaw, toRefs } from "vue";
let person = { name: "张三", age: 12 };
let toPerson = toRef(person, "age");
const changePerson = () => {
  toPerson.value++;
  console.log("toPerson", toPerson);
};
let newPerson = reactive({ name: "李四", age: 10 });
let toNewPerson = toRef(newPerson, "age");
const changeNewPerson = () => {
  toNewPerson.value++;
  console.log("toNewPerson", toNewPerson);
};

// toRefs 可以帮我们批量创建ref对象主要是方便我们解构使用
// import { toRefs } from "vue";
const obj = reactive({
  foo: 1,
  bar: 1,
});
let { foo, bar } = toRefs(obj);

const changeFoo = () => {
  foo.value++;
  console.log(foo, bar);
};
//toRaw  将响应式对象转化为普通对象
// import { toRaw } from "vue";
const rawObj = reactive({
  foo: 1,
  bobj: {
    bar: 1,
  },
});
const state = toRaw(rawObj);
// 响应式对象转化为普通对象
const changeRawObj = () => {
  rawObj.foo++;
  state.bobj.bar++;
  console.log(rawObj, state);
};
</script>
<template>
  <div>{{ person }} =={{ toPerson }}=={{ newPerson }}=={{ toNewPerson }}</div>
  <div>
    <button @click="changePerson">修改person</button>
    <button @click="changeNewPerson">修改newPerson</button>
  </div>
  <div>{{ foo }}==={{ bar }}</div>
  <div>
    <button @click="changeFoo">修改foo</button>
  </div>
  <div>{{ rawObj }}==={{ state }}</div>
  <div>
    <button @click="changeRawObj">修改foo</button>
  </div>
</template>